<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>樊慧玲的计算器</title>
<style>
 
.calculator_fhl {    
    width: 300px;         
    height: 500px;          
    background-color: black;  
    display: flex;           
    flex-direction: column; 
    align-items: right;    
    justify-content: space-between;
    padding: 10px;          
    box-sizing: border-box;   
  }  
    

  .display-fhl { 
    background-color: black;    
    height: 150px;                
    line-height: 150px;        
    font-size: 30px;             
    color: white;                 
    text-align: right;              
    padding: 0 10px;              
    box-sizing: border-box;        
    
  }  
    
  
  .button-fhl {    
    display: grid;                 
    grid-template-columns: repeat(4, auto); 
    grid-gap: 15px;                  
    row-gap: 15px;                  
  }  
    

  button {    
    width: 50px;                   
    height: 50px;                
    border: none;                  
    border-radius: 50%;           
    color: white;                  
    font-size: 20px;                
    display: flex;                
    align-items: center;            
    justify-content: center;        
    cursor: pointer;                
    background-color: #808080;      
  }  
     
  button:active {    
    filter: brightness(1.2);        
  }  
    
  button.special {    
    border-radius: 5px;             
  }  



  #orange_fhl{
    background-color: orange;
}
    #rgb_fhl{
    background-color: rgb(169,169,169);
}

#zero_fhl{
    border-radius: 30px; 
    grid-column: span 2; 
    width: 120px
}


</style>
</head>
<body >
    <div class="calculator_fhl">  
        <div class="display-fhl" id="display">0</div>  
        <div class="button-fhl">   
        <button id="rgb_fhl" onclick="handleButton('AC')">AC</button>  
        <button id="rgb_fhl" onclick="handleButton('Back')">Back</button>  
        <button id="rgb_fhl" onclick="handleButton('+/-')">+/-</button> 
        <button id="orange_fhl" onclick="handleButton('/')">/</button>

        <button  onclick="handleButton('7')">7</button>
        <button  onclick="handleButton('8')">8</button> 
        <button  onclick="handleButton('9')">9</button>
        <button  id="orange_fhl" onclick="handleButton('*')">*</button> 

        <button  onclick="handleButton('4')">4</button>
        <button  onclick="handleButton('5')">5</button>
        <button  onclick="handleButton('6')">6</button>
        <button  id="orange_fhl" onclick="handleButton('-')">-</button>

        <button  onclick="handleButton('1')">1</button>
        <button  onclick="handleButton('2')">2</button>
        <button  onclick="handleButton('3')">3</button>
        <button  id="orange_fhl" onclick="handleButton('+')">+</button>

        <button  id="zero_fhl" onclick="handleButton('0')">0</button>
        <button  onclick="handleButton('.')">.</button>
        <button id="orange_fhl" onclick="handleButton('=')">=</button>  
        </div>  
      </div>  
      
  </div>  
</div>  

<script>
let display = document.getElementById('display');    
let expression = '0'; // 初始表达式设为'0'  
  
// 更新显示区域  
function updateDisplay(value) {    
  display.textContent = value;    
  expression = value; // 更新表达式  
}  
  
// 处理数字按钮点击  
function handleNumber(buttonValue) {  
  if (expression === '0' && buttonValue !== '.') {  
    updateDisplay(buttonValue);  
  } else if (!expression.includes('.') || expression.slice(-1) !== '.') {  
    updateDisplay(expression + buttonValue);  
  }  
}  
  
// 处理运算符和特殊按钮  
function special(buttonValue) {  
  switch (buttonValue) {  
    case 'AC':  
      updateDisplay('0');  
      break;  
    case 'Back':  
      if (expression.length > 1) {  
        updateDisplay(expression.slice(0, -1));  
      }  
      break;  
    case '+/-':  
      if (/^\d+(\.\d+)?$/.test(expression)) { // 检查表达式是否只包含数字  
        updateDisplay(expression[0] === '-' ? expression.slice(1) : '-' + expression);  
      }  
      break;  
    case '=':  
      try {  
        let result = calculateExpression(expression);  
        updateDisplay(result.toFixed(6));  
      } catch (e) {  
        updateDisplay('Error');  
      }  
      break;  
    default:  
      if (expression !== '0' || buttonValue === '-') {  
        updateDisplay(expression + buttonValue);  
      }  
      break;  
  }  
}  
    
function calculateExpression(expr) {   
  const parts = expr.split(/([+\-*/])/);  
  let result = parseFloat(parts[0]);  
  for (let i = 1; i < parts.length; i += 2) {  
    const num = parseFloat(parts[i + 1]);  
    const op = parts[i];  
    switch (op) {  
      case '+':  
        result += num;  
        break;  
      case '-':  
        result -= num;  
        break;  
      case '*':  
        result *= num;  
        break;  
      case '/':  
        if (num !== 0) {  
          result /= num;  
        } else {  
          throw new Error('Division by zero');  
        }  
        break;  
    }  
  }  
  return result;  
}  
  
// 绑定按钮的点击事件  
document.querySelectorAll('button').forEach(button => {  
  button.addEventListener('click', () => {  
    const buttonValue = button.textContent;  
    if (!isNaN(buttonValue)) {  
      handleNumber(buttonValue);  
    } else {  
      special(buttonValue);  
    }  
  });  
});
</script> 
</body>  
</html>